* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.clear-fix::after {
    display: block;
    content: '';
    clear: both;
}

/* 元素默认样式 */

ul, li {
    list-style: none;
}

a,.link {
    color: #0d6efd;
    text-decoration: none;
    cursor: pointer;
}

a:hover,.link:hover {
    text-decoration: underline;
    color: #0a58ca;
}

.h1, h1 {
    font-size: 35px;
}

.h2, h2 {
    font-size: 28px;
}

.h3, h3 {
    font-size: 24.5px;
}

.h4, h4 {
    font-size: 21px;
}

.h5, h5 {
    font-size: 17.5px;
}

.h6, h6 {
    font-size: 14px;
}

.h1, h1,
.h2, h2,
.h3, h3,
.h4, h4,
.h5, h5,
.h6, h6{
    margin-top: 8px;
    margin-bottom: 4px;
    padding: 8px;
}

img {
    display: block;
}

table, .table {
    border-collapse: collapse;
    border-color: #dee2e6;
    color: #212529;
    vertical-align: middle;
}

th {
    font-weight: bold;
}

th, td {
    border: 1px solid #dee2e6;
    padding: 5px;
}

.w-50p td{
    width: 1%;
}

input[type="text"], input[type="email"], input[type="password"], input[type="file"], select, textarea {
    padding: 6px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    color: #212529;
    min-height: 34px;
    min-width: 200px;
    font-size: 16px;
}

input::placeholder, textarea::placeholder {
    color: #6c757d;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="file"]:focus, select:focus, textarea:focus {
    border-color: #86b7fe;
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25)
}

input[type="text"]:disabled, input[type="email"]:disabled, input[type="password"]:disabled, input[type="file"]:disabled, select:disabled {
    background-color: #e9ecef;
    opacity: 1;
    color: #6c757d;
}

input[type="checkbox"], input[type="radio"] {
    width: 14px;
    height: 14px;
    margin-top: 4px;
    border-radius: 4px;
    vertical-align: top;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid rgba(0, 0, 0, .25);
    -webkit-appearance: none;
}

input[type="checkbox"]:checked, input[type="radio"]:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

input[type="checkbox"]:focus, input[type="radio"]:focus {
    outline: none;
}

input[type="checkbox"]:disabled, input[type="radio"]:disabled {
    opacity: .5;
}

input[type="radio"] {
    border-radius: 50%;
}

input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

input[type="checkbox"].switch {
    width: 28px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    background-position: left center;
    border-radius: 28px;
}

input[type="checkbox"]:checked.switch {
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

input.is-valid {
    border-color: #198754;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 7.875px center;
    background-size: 15.75px 15.75px;
}

input:focus.is-valid {
    border-color: #198754;
    box-shadow: 0 0 0 3.5px rgba(25, 135, 84, .25);
}

input.is-invalid {
    border-color: #dc3545;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 7.875px center;
    background-size: 15.75px 15.75px;
}

input:focus.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 3.5px rgba(220, 53, 69, .25);
}

button, .btn, input[type="button"], input[type="submit"], input[type="reset"] {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 5.25px 10.05px;
    font-size: 14px;
    border-radius: 3.5px;
    cursor: pointer;
    background: #e0e1e2 none;
    color: rgba(0, 0, 0, .6);
}

button:hover, .btn:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {
    background-color: #cacbcd;
    color: rgba(0, 0, 0, .8);
}

button:focus, .btn:focus, input[type="button"]:focus, input[type="submit"]:focus, input[type="reset"]:focus {
    outline: none;
}

button:active, .btn:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active {
    background-color: #babbbc;
    color: rgba(0, 0, 0, .9);
}

.btn-primary, button.blue,.btn.blue{
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.btn-primary:hover, button.blue:hover,.btn.blue:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

.btn-primary:active, button.blue:active,.btn.blue:active {
    background-color: #0a58ca;
    border-color: #0a53be;
}

.btn-secondary, button.gray,.btn.gray {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-secondary:hover, button.gray:hover,.btn.gray:hover {
    background-color: #5c636a;
    border-color: #565e64;
}

.btn-secondary:active, button.gray:active,.btn.gray:active {
    background-color: #565e64;
    border-color: #51585e;
}

.btn-success, button.green,.btn.green {
    color: #fff;
    background-color: #198754;
    border-color: #198754;
}

.btn-success:hover, button.green:hover,.btn.green:hover {
    background-color: #157347;
    border-color: #146c43;
}

.btn-success:active, button.green:active,.btn.green:active {
    background-color: #146c43;
    border-color: #13653f;
}

.btn-danger, button.red,.btn.red {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-danger:hover, button.red:hover,.btn.red:hover {
    background-color: #bb2d3b;
    border-color: #b02a37;
}

.btn-danger:active, button.red:active,.btn.red:active {
    background-color: #b02a37;
    border-color: #a52834;
}

.btn-warning, button.yellow,.btn.yellow {
    color: #000;
    background-color: #ffc107;
    border-color: #ffc107;
}

.btn-warning:hover, button.yellow:hover,.btn.yellow:hover {
    background-color: #ffca2c;
    border-color: #ffc720;
}

.btn-warning:active, button.yellow:active,.btn.yellow:active {
    background-color: #ffcd39;
    border-color: #ffc720;
}

/* 布局 */

.row {
    display: flex;
    flex-wrap: wrap;
}

.row>.col {
    flex: 1;
}

.col-auto {
    flex: 0 0 auto;
    width: auto
}

.col-1 {
    flex: 0 0 auto;
    width: 8.3333333333%
}

.col-2 {
    flex: 0 0 auto;
    width: 16.6666666667%
}

.col-3 {
    flex: 0 0 auto;
    width: 25%
}

.col-4 {
    flex: 0 0 auto;
    width: 33.3333333333%
}

.col-5 {
    flex: 0 0 auto;
    width: 41.6666666667%
}

.col-6 {
    flex: 0 0 auto;
    width: 50%
}

.col-7 {
    flex: 0 0 auto;
    width: 58.3333333333%
}

.col-8 {
    flex: 0 0 auto;
    width: 66.6666666667%
}

.col-9 {
    flex: 0 0 auto;
    width: 75%
}

.col-10 {
    flex: 0 0 auto;
    width: 83.3333333333%
}

.col-11 {
    flex: 0 0 auto;
    width: 91.6666666667%
}

.col-12 {
    flex: 0 0 auto;
    width: 100%
}

.offset-1 {
    margin-left: 8.3333333333%
}

.offset-2 {
    margin-left: 16.6666666667%
}

.offset-3 {
    margin-left: 25%
}

.offset-4 {
    margin-left: 33.3333333333%
}

.offset-5 {
    margin-left: 41.6666666667%
}

.offset-6 {
    margin-left: 50%
}

.offset-7 {
    margin-left: 58.3333333333%
}

.offset-8 {
    margin-left: 66.6666666667%
}

.offset-9 {
    margin-left: 75%
}

.offset-10 {
    margin-left: 83.3333333333%
}

.offset-11 {
    margin-left: 91.6666666667%
}

/* 组件 */

.badge {
    display: inline-block;
    padding: .35em .65em;
    font-size: .75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 3.5px;
    background-color: #0d6efd;
}

.round {
    border-radius: 700px;
}

/* 颜色 */

.bg-primary, .bg-blue {
    background-color: #0d6efd;
    color: #fff;
}

.bg-secondary, .bg-gray {
    background-color: #6c757d;
    color: #fff;
}

.bg-success, .bg-green {
    background-color: #198754;
    color: #fff;
}

.bg-danger, .bg-red {
    background-color: #dc3545;
    color: #fff;
}

.bg-warning, .bg-yellow {
    background-color: #ffc107;
    color: #212529;
}

.bg-info, .bg-cyan {
    background-color: #0dcaf0;
    color: #212529;
}

.bg-light, .bg-white {
    background-color: #f8f9fa;
    color: #212529;
}

.bg-dark, .bg-black {
    background-color: #212529;
    color: #fff;
}

.bg-indigo {
    color: #fff;
    background-color: #6610f2
}

.bg-purple {
    color: #fff;
    background-color: #6f42c1
}

.bg-pink {
    color: #fff;
    background-color: #d63384
}

.bg-orange {
    color: #000;
    background-color: #fd7e14
}

.bg-teal {
    color: #000;
    background-color: #20c997
}

.bg-gray-dark {
    color: #fff;
    background-color: #343a40
}

.text-primary,
.text-blue {
    color: #0d6efd;
}

.text-secondary,
.text-gray {
    color: #6c757d;
}

.text-success,
.text-green {
    color: #198754;
}

.text-info,
.text-cyan {
    color: #0dcaf0;
}

.text-warning,
.text-yellow {
    color: #ffc107;
}

.text-danger,
.text-red {
    color: #dc3545;
}

.text-light{
    color: #f8f9fa;
}

.text-dark,
.text-black {
    color: #212529;
}

.text-white {
    color: #fff;
}

.text-muted {
    color: #6c757d;
}


.hide {
    display: none;
}

.show {
    display: block;
}

.text-overflow {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.border,.border-left {border-left: 1px solid #dee2e6;}
.border,.border-right {border-right: 1px solid #dee2e6;}
.border,.border-top {border-top: 1px solid #dee2e6;}
.border,.border-bottom {border-bottom: 1px solid #dee2e6;}

.shadow-sm {
    box-shadow: 0 1.75px 3.5px rgba(0,0,0,.075);
}

.shadow {
    box-shadow: 0 7px 14px rgba(0,0,0,.15);
}

.shadow-lg {
    box-shadow: 0 14px 42px rgba(0,0,0,.175);
}

.w-25p {
    width: 25%;
}
.w-50p {
    width: 50%;
}

table.w-50p,
tr.w-50p,
tbody.w-50p,
thead.w-50p {
    width: auto;
}

.w-75p {
    width: 75%;
}
.w-100p {
    width: 100%;
}
.w-auto {
    width: auto;
}

.h-25p {
    height: 25%;
}
.h-50p {
    height: 50%;
}

.h-75p {
    height: 75%;
}
.h-100p {
    height: 100%;
}
.h-auto {
    height: auto;
}

.ml-1,.m-1, .mx-1{margin-left: 4px;}
.mr-1,.m-1, .mx-1{margin-right: 4px;}
.mt-1,.m-1, .my-1{margin-top: 4px;}
.mb-1,.m-1, .my-1{margin-bottom: 4px;}

.ml-2,.m-2 ,.mx-2{margin-left: 8px;}
.mr-2,.m-2 ,.mx-2{margin-right: 8px;}
.mt-2,.m-2 ,.my-2{margin-top: 8px;}
.mb-2,.m-2 ,.my-2{margin-bottom: 8px;}

.ml-3,.m-3,.mx-3{margin-left: 12px;}
.mr-3,.m-3,.mx-3{margin-right: 12px;}
.mt-3,.m-3,.my-3{margin-top: 12px;}
.mb-3,.m-3,.my-3{margin-bottom: 12px;}

.ml-4,.m-4,.mx-4{margin-left: 16px;}
.mr-4,.m-4,.mx-4{margin-right: 16px;}
.mt-4,.m-4,.my-4{margin-top: 16px;}
.mb-4,.m-4,.my-4{margin-bottom: 16px;}

.ml-5,.m-5,.mx-5{margin-left: 20px;}
.mr-5,.m-5,.mx-5{margin-right: 20px;}
.mt-5,.m-5,.my-5{margin-top: 20px;}
.mb-5,.m-5,.my-5{margin-bottom: 20px;}

.ml-6,.m-6,.mx-6{margin-left: 24px;}
.mr-6,.m-6,.mx-6{margin-right: 24px;}
.mt-6,.m-6,.my-6{margin-top: 24px;}
.mb-6,.m-6,.my-6{margin-bottom: 24px;}

.ml-7,.m-7,.mx-7{margin-left: 28px;}
.mr-7,.m-7,.mx-7{margin-right: 28px;}
.mt-7,.m-7,.my-7{margin-top: 28px;}
.mb-7,.m-7,.my-7{margin-bottom: 28px;}

.ml-8,.m-8,.mx-8{margin-left: 32px;}
.mr-8,.m-8,.mx-8{margin-right: 32px;}
.mt-8,.m-8,.my-8{margin-top: 32px;}
.mb-8,.m-8,.my-8{margin-bottom: 32px;}

.ml-9,.m-9,.mx-9{margin-left: 36px;}
.mr-9,.m-9,.mx-9{margin-right: 36px;}
.mt-9,.m-9,.my-9{margin-top: 36px;}
.mb-9,.m-9,.my-9{margin-bottom: 36px;}

.ml-10,.m-10,.mx-10{margin-left: 40px;}
.mr-10,.m-10,.mx-10{margin-right: 40px;}
.mt-10,.m-10,.my-10{margin-top: 40px;}
.mb-10,.m-10,.my-10{margin-bottom: 40px;}

.ml-auto,.m-auto,.mx-auto{margin-left: auto;}
.mr-auto,.m-auto,.mx-auto{margin-right: auto;}
.mt-auto,.m-auto,.my-auto{margin-top: auto;}
.mb-auto,.m-auto,.my-auto{margin-bottom: auto;}


.pl-1,.p-1, .px-1{padding-left: 4px;}
.pr-1,.p-1, .px-1{padding-right: 4px;}
.pt-1,.p-1, .py-1{padding-top: 4px;}
.pb-1,.p-1, .py-1{padding-bottom: 4px;}

.pl-2,.p-2 ,.px-2{padding-left: 8px;}
.pr-2,.p-2 ,.px-2{padding-right: 8px;}
.pt-2,.p-2 ,.py-2{padding-top: 8px;}
.pb-2,.p-2 ,.py-2{padding-bottom: 8px;}

.pl-3,.p-3,.px-3{padding-left: 12px;}
.pr-3,.p-3,.px-3{padding-right: 12px;}
.pt-3,.p-3,.py-3{padding-top: 12px;}
.pb-3,.p-3,.py-3{padding-bottom: 12px;}

.pl-4,.p-4,.px-4{padding-left: 16px;}
.pr-4,.p-4,.px-4{padding-right: 16px;}
.pt-4,.p-4,.py-4{padding-top: 16px;}
.pb-4,.p-4,.py-4{padding-bottom: 16px;}

.pl-5,.p-5,.px-5{padding-left: 20px;}
.pr-5,.p-5,.px-5{padding-right: 20px;}
.pt-5,.p-5,.py-5{padding-top: 20px;}
.pb-5,.p-5,.py-5{padding-bottom: 20px;}

.pl-6,.p-6,.px-6{padding-left: 24px;}
.pr-6,.p-6,.px-6{padding-right: 24px;}
.pt-6,.p-6,.py-6{padding-top: 24px;}
.pb-6,.p-6,.py-6{padding-bottom: 24px;}

.pl-7,.p-7,.px-7{padding-left: 28px;}
.pr-7,.p-7,.px-7{padding-right: 28px;}
.pt-7,.p-7,.py-7{padding-top: 28px;}
.pb-7,.p-7,.py-7{padding-bottom: 28px;}

.pl-8,.p-8,.px-8{padding-left: 32px;}
.pr-8,.p-8,.px-8{padding-right: 32px;}
.pt-8,.p-8,.py-8{padding-top: 32px;}
.pb-8,.p-8,.py-8{padding-bottom: 32px;}

.pl-9,.p-9,.px-9{padding-left: 36px;}
.pr-9,.p-9,.px-9{padding-right: 36px;}
.pt-9,.p-9,.py-9{padding-top: 36px;}
.pb-9,.p-9,.py-9{padding-bottom: 36px;}

.pl-10,.p-10,.px-10{padding-left: 40px;}
.pr-10,.p-10,.px-10{padding-right: 40px;}
.pt-10,.p-10,.py-10{padding-top: 40px;}
.pb-10,.p-10,.py-10{padding-bottom: 40px;}

.pl-auto,.p-auto,.px-auto{padding-left: auto;}
.pr-auto,.p-auto,.px-auto{padding-right: auto;}
.pt-auto,.p-auto,.py-auto{padding-top: auto;}
.pb-auto,.p-auto,.py-auto{padding-bottom: auto;}

.text-center{text-align: center;}
.text-left{text-align: left;}
.text-right{text-align: right;}

.d-none{display: none;}
.d-block{display: block;}
.d-inline{display: inline;}
.d-inline-block{display: inline-block;}